<template>
	<div id="home">
		<md-theme >
			<navBar @toggleLeftSidenav="toggleLeftSidenav"></navBar>
			<md-sidenav class="md-left" ref="leftSidenav" >
			    <md-toolbar class="md-large">
			      <div class="md-toolbar-container">
			        <h3 class="md-title">菜单</h3>
			      </div>
			    </md-toolbar>
				<div class="list">
					<p><a href="">电影</a></p>
					<p><a href="">书籍</a></p>
					<p><a href="">音乐</a></p>
					<p><a href="">图片</a></p>
				</div>
			</md-sidenav>
			<keep-alive>
				<router-view></router-view>
			</keep-alive>
		</md-theme>
	</div>
</template>
<script>
import navBar from "../../components/common/navBar"
import movie from "../../components/movie/movie"
export default {
	methods:{
		toggleLeftSidenav() {
	      this.$refs.leftSidenav.toggle();
	    },
	},
    components: {
		navBar,
		movie
	}
}
</script>
<style scope>
	.md-toolbar.md-large{
		height: 3.125rem;
	}
	.list{
		padding:1.875rem 0;
	}
	.list p{
		line-height: 2.5rem;
		font-size:1.125rem;
	}
	.list p a{
		color:#2196f3!important;
	}
</style>

